<template>
	<!--首页->新房>搜索页面-->
	<!--https://youzan.github.io/vant/#/zh-CN/intro-->
	<div class="newhouse" id="app">
		<!--头部-->
		<myheader></myheader>
		<!--搜索框-->
		<div class="search_box">
			<div class="search_box1">
				<input type="search" placeholder="融景城" v-model="inputx" class="search" />
				<button class="search_btn" @click="searchs">搜索</button>
			</div>
			<span class="searchbg"></span>
		</div>
		<!--搜索内容-->
		<div class="hot-keywords-container">
			<p class="title">热们都是</p>
			<ul class="search_terms">
				<li>
					<router-link to='/newhouse/mysearch' title="热门搜索">热门搜索
					</router-link>
				</li>
				<li>
					<router-link to='/newhouse/mysearch' title="跳转楼盘列表">跳转楼盘列表
					</router-link>
				</li>
				<li>
					<router-link to='/newhouse/mysearch' title="中交中央公园">中交中央公园
					</router-link>
				</li>
				<li>
					<router-link to='/newhouse/mysearch' title="中交中央公园">中交中央公园
					</router-link>
				</li>
				<li>
					<router-link to='/newhouse/mysearch' title="中交中央公园">中交中央公园
					</router-link>
				</li>
			</ul>
		</div>
		<!--底部信息-->
		<div class="fooder">
			<div class="nav">
				<router-link to='/newhouse'>重庆新房</router-link>&nbsp;>
				<router-link to='/'>重庆楼盘</router-link>
			</div>
			<div class="link_box">
				<div class="link_tit">
					<h3>热门城市</h3>
					<h3>城市推荐楼盘</h3>
				</div>
			</div>
			<div class="info">
				<div class="icon_box">
					<router-link to='/lideta/mydetails'>iPhone客户端</router-link>
					<router-link to='/lideta/mydetails'>Android客户端</router-link>
				</div>
				<div class="copyright">
					<p class="company">天津小屋信息科技有限公司</p>
					<div class="record">网络经营许可证 津ICP备18000836号-1</div>
					<div class="record">copyright©2019 ke.com 版权所有</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import myheader from '@/components/public/myheader'
	import myswiper from '@/components/public/myswiper'
	import choice from '@/components/public/choice'
	export default {
		name: 'newhouse',
		data() {
			return {
				inputx: '',
				imgdata: [{
					url: '../../../../static/wfy/house10.jpg'
				}, {
					url: '../../../../static/wfy/house08.jpg'
				}, {
					url: '../../../../static/wfy/house11.jpg'
				}, {
					url: '../../../../static/wfy/house07.jpg'
				}, {
					url: '../../../../static/wfy/house09.jpg'
				}]
			}
		},
		mounted: function() {
			//判读是否登陆了
			if (localStorage.getItem("nameid") == null || localStorage.getItem("nameid") == undefined || localStorage.getItem("nameid") == "") {
				this.$router.push({
					name: 'login'
				});
			} else {
			}
		},
		components: {
			myheader,
			myswiper,
			choice
		},
		methods: {
			searchs() {
				this.inputx = this.inputx;
				var datax = {
					userval: this.inputx
				}
				var _this = this;
				this.axios.post(_this.ajaxUrl + '/api/Lideta/sellike', _this.qs.stringify(datax)).then(function(res) {
					_this.data = res.data;
					console.log(res.data);
					//js路由跳转并js传值
					_this.$router.push({
						name: 'searchpage',
						query: {
							userval: _this.inputx
						}
					})
				}).catch(function(err) {});
			}
		}
	}
</script>

<style scoped="scoped">
	/*搜索框*/
	
	.underline {
		width: 100%;
	}
	
	.search_box {
		height: 1.3rem;
		padding: 0.25rem 0.35rem;
		box-sizing: border-box;
		background: #f5f5f5;
		position: relative;
	}
	
	.search_box1 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.search {
		border-radius: 0.1rem;
		overflow: hidden;
		width: 100%;
		height: 0.7rem;
		border: 1px solid #E4E6F0;
		outline: none;
		color: #9399a5;
		font-size: 0.3rem;
		padding-left: 0.9rem;
		padding-right: 0.3rem;
		box-sizing: border-box;
	}
	
	.search_btn {
		color: #9399a5;
		width: 1.24rem;
		height: 0.72rem;
		background: #f5f5f5;
		outline: none;
		border: none;
		font-size: 0.3rem;
	}
	
	.searchbg {
		position: absolute;
		width: 0.28rem;
		height: 0.28rem;
		background: url(../../../../static/wfy/search_03.png) no-repeat center;
		background-size: 0.28rem;
		left: 10%;
		top: 41%;
	}
	/*楼盘*/
	
	.sale_box {
		padding: 0.45rem 0rem;
		box-sizing: border-box;
		/*box-shadow:0px 15px 10px -15px #ccc;*/
	}
	
	.sale_box>ul {
		display: flex;
		justify-content: space-around;
		font-size: 0.3rem;
		color: #07111f;
		padding: 0 0.2rem;
		box-sizing: border-box;
	}
	
	.bgimg {
		width: 0.64rem;
		height: 0.59rem;
		margin: auto;
		padding: 0.5rem 0 0.2rem 0;
		box-sizing: border-box;
	}
	
	.bgimg>img {
		width: 0.64rem;
		height: 0.59rem;
	}
	/*搜索*/
	
	.housedata_box>div {
		background: #fff;
	}
	
	.housedata_box {
		background: #f5f5f5;
		padding: 0.2rem 0;
		box-sizing: border-box;
	}
	
	.houseinfo {
		border-top: 1px solid #ececec;
		border-bottom: 1px solid #ececec;
	}
	
	.houseinfo li {
		padding: 0.35rem 0.25rem;
		box-sizing: border-box;
		background: #fff;
	}
	
	.houseinfo li>a {
		width: 100%;
		display: block;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}
	
	.houseinfo li>a img {
		width: 2.09rem;
		height: 1.75rem;
	}
	
	.houseinfo .housebox {
		padding: 0 0.3rem;
		box-sizing: border-box;
	}
	
	.title {
		width: 100%;
		display: inline-block;
		font-size: 0.38rem;
		color: #000000;
		line-height: 0.4rem;
		color: #101D37;
		font-weight: bold;
	}
	
	.details {
		display: inline-block;
		font-size: 0.12rem;
		color: #121d2f;
		line-height: 0.6rem;
		height: 0.55rem;
	}
	
	.type {
		color: #9399A5;
		font-size: 0.2rem;
		line-height: 0.45rem;
	}
	
	.introduce span {
		line-height: 0.3rem;
		font-size: 0.12rem;
		color: #747e98;
		background: #e9eaed;
		border-radius: 0.03rem;
		padding: 0.08rem;
		box-sizing: border-box;
	}
	
	.introduce .fa {
		background: #5f94fe;
		color: #fff;
	}
	
	.pricebox {
		display: flex;
		justify-content: flex-start;
		height: 0.5rem;
		line-height: 0.7rem;
	}
	
	.pricebox .size {
		display: block;
		font-size: 0.2rem;
		color: #b2b5b8;
	}
	
	.pricebox .pic {
		font-size: 0.38rem;
		color: #fa5741;
		padding-right: 0.1rem;
		box-sizing: border-box;
	}
	
	.text-wrapper {
		display: inline-block;
		margin-top: 0.15rem;
		width: 3rem;
		height: 0.45rem;
		text-align: center;
		line-height: 0.45rem;
		box-sizing: border-box;
		background: url(../../../../static/wfy/imagbg01_03.png) no-repeat center;
		background-size: cover;
		font-size: 0.2rem;
		color: #fff;
	}
	/**/
	
	.hot-keywords-container {
		background: #f5f5f5;
		font-size: .3rem;
		color: #9399A5;
		border-bottom: 1px solid #E4E6F0;
		padding-bottom: 0.3rem;
		box-sizing: border-box;
	}
	
	.title {
		border-top: 1px solid #E4E6F0;
		padding-top: 0.3rem;
		padding-left: 0.3rem;
		background: #fff;
		font-size: 0.26rem;
		color: #9399a5;
		box-sizing: border-box;
	}
	
	.search_terms {
		background: #fff;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-bottom: 0.2rem;
		box-sizing: border-box;
	}
	
	.search_terms li {
		margin: 0.2rem 0.2rem;
		border: 1px solid #CED2D6;
		padding: 0.1rem;
	}
	
	.search_terms li>a {
		font-size: 0.26rem;
		color: #9399a5;
	}
	/*底部信息*/
	
	.fooder {
		padding: 0 0.35rem;
		background: #2f3130;
		color: #727373;
		padding-bottom: 1rem;
	}
	
	.fooder .nav {
		height: 0.85rem;
		line-height: 0.85rem;
		text-align: left;
		border-bottom: 1px solid #3e403f;
		font-size: 0.14rem;
		overflow: hidden;
	}
	
	.nav a {
		color: #a9abaa;
	}
	
	.nav a:last-of-type {
		color: #747675;
	}
	
	.link_tit {
		font-size: 0.25rem;
		display: flex;
		box-sizing: border-box;
		padding: 0.35rem 0;
		justify-content: space-between;
	}
	
	.link_tit h3 {
		width: 47%;
		display: block;
		padding: 0.2rem;
		box-sizing: border-box;
		text-align: center;
	}
	
	.link_tit h3:first-of-type {
		background: #3d3f3e;
		color: #fff;
	}
	
	.link_tit h3:last-of-type {
		background: #212121;
		color: #767676;
	}
	
	.info {
		display: flex;
		justify-content: space-between;
	}
	
	.icon_box {
		width: 4rem;
		display: flex;
		justify-content: space-between;
		font-size: 0.15rem;
		align-items: center;
	}
	
	.icon_box a {
		padding-left: 0.5rem;
		box-sizing: border-box;
		color: #717372;
	}
	
	.icon_box a:first-of-type {
		background: url(../../../../static/wfy/iPhone.png) no-repeat left center;
		background-size: 0.45rem 0.55rem;
	}
	
	.icon_box a:last-of-type {
		background: url(../../../../static/wfy/Android.png) no-repeat left center;
		background-size: 0.45rem 0.55rem;
	}
	
	.copyright {
		overflow: hidden;
		white-space: nowrap;
	}
	
	.company {
		margin-top: 0.5rem;
		line-height: 0.4rem;
		text-align: right;
		font-size: 0.12rem;
	}
	
	.record {
		width: 100%;
		line-height: 0.4rem;
		text-align: center;
		font-size: .01rem;
	}
</style>